<template>
  <div class="visitor-flow">
    <div class="flow-stats">
      <div class="stat-item">
        <div class="stat-value">{{ data.total }}</div>
        <div class="stat-label">今日总量</div>
      </div>
      <div class="stat-item increase">
        <div class="stat-value">{{ data.todayIncrease }}</div>
        <div class="stat-label">较昨日</div>
      </div>
    </div>
    <div class="flow-chart">
      <div class="chart-container" ref="chartRef"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      total: 0,
      todayIncrease: '+0%',
      hourlyData: []
    })
  }
})

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  
  const hours = Array.from({ length: 12 }, (_, i) => `${(i + 8).toString().padStart(2, '0')}:00`)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00ff88',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff'
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: hours,
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 255, 136, 0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.6)',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.6)',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 255, 136, 0.1)'
        }
      }
    },
    series: [
      {
        data: props.data.hourlyData,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#00ff88',
          width: 3
        },
        itemStyle: {
          color: '#00ff88',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 255, 136, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(0, 255, 136, 0.05)'
              }
            ]
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 255, 136, 0.8)'
          }
        }
      }
    ]
  }
  
  chartInstance.setOption(option)
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
})
</script>

<style scoped>
.visitor-flow {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flow-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 0.8rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(0, 255, 136, 0.15);
  transform: translateY(-2px);
}

.stat-item.increase {
  background: rgba(255, 171, 64, 0.08);
  border-color: rgba(255, 171, 64, 0.3);
}

.stat-item.increase:hover {
  background: rgba(255, 171, 64, 0.15);
}

.stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  margin-bottom: 0.3rem;
}

.stat-item.increase .stat-value {
  color: #ffab40;
  text-shadow: 0 0 10px rgba(255, 171, 64, 0.5);
}

.stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.flow-chart {
  flex: 1;
  min-height: 100px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style> 